<template>
	<view class="mine">
		<view class="info">
			<view class="first">
				<image class="avatar" :src="userinfo == null ?avatar: userinfo.imagePath"></image>
			</view>
			<text class="nickname">{{ userinfo == null ? 学生:userinfo.realName}}</text>
			<text class="grade">
				<span v-if="userinfo.userLevel === 1">一年级</span>
				<span v-else-if="userinfo.userLevel === 2">二年级</span>
				<span v-else-if="userinfo.userLevel === 3">三年级</span>
				<span v-else-if="userinfo.userLevel === 4">四年级</span>
				<span v-else-if="userinfo.userLevel === 5">五年级</span>
				<span v-else-if="userinfo.userLevel === 6">六年级</span>
				<span v-else-if="userinfo.userLevel === 7">初一</span>
				<span v-else-if="userinfo.userLevel === 8">初二</span>
				<span v-else-if="userinfo.userLevel === 9">初三</span>
				<span v-else-if="userinfo.userLevel === 10">高一</span>
				<span v-else-if="userinfo.userLevel === 11">高二</span>
				<span v-else-if="userinfo.userLevel === 12">高三</span>
				<span v-else>无</span>
			</text>
		</view>
		<view class="active">
			<view class="active-item" v-for="item in itemList" :key="item.id" @click="navigatorToPage(item.id)">
				<view class="active-item-first" >
					<text class="active-item-icon" :class="item.icon" :style="{color: item.colors}"></text>
					<text class="active-item-name">{{item.name}}</text>
				</view>
				<view v-if="item.isShow" class="active-item-icon2 next iconfont icon-youjiantou1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20190318%2Fd2cea578de0e4c9a8d5398db6d4e05da.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639114286&t=4886388bff3febc6fbcf06a8f93261f0",
				itemList:[{
					id:1,
					name: "动态",
					icon: "iconfont icon-dongtai",
					colors: "#FF0DC7",
					isShow: true
				},{
					id:2,
					name: "资料修改",
					icon: "iconfont icon-xiugai",
					colors:"#30EF3C",
					isShow: true
				},{
					id:3,
					name: "密码修改",
					icon: "iconfont icon-ziyuanxhdpi",
					colors: "#13227A",
					isShow: true
				},{
					id:4,
					name: "考试记录",
					icon: "iconfont icon-kaoshijilu",
					colors: "#F4EA2A",
					isShow: true
				},{
					id:5,
					name: "消息",
					icon: "iconfont icon-xiaoxi",
					colors:"#1890FF",
					isShow: true
				},{
					id:6,
					name: "登出",
					icon: "iconfont icon-tuichu",
					colors: "#D81E06",
					isShow: false
				}],
				userinfo:{},
				reFresh: ""
				
			}
		},
		onLoad:function(){
			
			//获取token
			let token = uni.getStorageSync("token");
			console.log(!token);
			if( !token){
				// uni.showToast({
				// 	title: "请先登录！！"
				// })
				uni.redirectTo ({
					url: "/pages/login/login"
				});
			}
			this.getUserInfo();
			
			
		},
		watch:{
			reFresh(){
				this.getUserInfo();
				console.log("我的页面已重新加载");
			}
		},
		methods: {
			
			//获取用户信息
			async getUserInfo(){
				const resp = await this.$myRequest({
					url: "/login/info"
				});
				if(resp){
					this.userinfo = resp.data;
				}
			},
			//跳转页面
			navigatorToPage(index){
				if(this.itemList[index-1].name === "资料修改"){
					uni.navigateTo({
					    url: '/pages/datamodification/datamodification'
					});
				}
				if(this.itemList[index-1].name === "密码修改"){
					uni.navigateTo({
					    url: '/pages/resetPassword/resetPassword'
					});
				}
				if(this.itemList[index-1].name === "考试记录"){
					uni.navigateTo({
					    url: '/pages/test-history/test-history'
					});
				}
				if(this.itemList[index-1].name === "消息"){
					uni.navigateTo({
					    url: '/pages/messages/messages'
					});
				}
				if(this.itemList[index-1].name === "动态"){
					uni.navigateTo({
					    url: '/pages/active/active'
					});
				}
				if(this.itemList[index-1].name === "登出"){
					uni.removeStorageSync("token");//清空token
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.mine{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	.info{
		width: 92%;
		height: 376rpx;
		background:#fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		margin-top: 30rpx;
		.first{
			width: 192rpx;
			height: 192rpx;
			border: 4rpx solid #E3E3E3;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right-width: 4rpx;
			border-right-color: #66BB6A;
			border-bottom-width: 4rpx;
			border-bottom-color: #66BB6A;
			.avatar{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}
		.nickname{
			font-size: 40rpx;
			color: #212121;
			font-weight: bold;
			margin-top: 20rpx;
		}
		.grade{
			font-size: 24rpx;
			color:#BFBFBF;
			margin-top: 20rpx;
		}
	}
	.active{
		width: 92%;
		margin-bottom: 200rpx;
		.active-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 120rpx;
			font-size: 32rpx;
			color: #212121;
			background-color: #fff;
			margin-top: 2rpx;
			padding-left: 30rpx;
			padding-right: 40rpx;
			box-sizing: border-box;
			.active-item-first{
				.active-item-icon{
					font-size:48rpx;
					vertical-align:middle
				}
				.active-item-name{
					margin-left: 30rpx;
					vertical-align:middle
				}
			}
			.active-item-icon2{color:#BFBFBF;font-weight: bold;vertical-align:middle}
		}
		.active-item:first-child{
			margin-top: 40rpx;
			border-radius: 20rpx 20rpx 0 0rpx;
		}
		.active-item:last-child{
			border-radius:  0 0 20rpx 20rpx;
		}
	}
}
</style>
